<template>
  <el-dialog append-to-body :close-on-click-modal="false" :title="option.modalTitle" :visible.sync="isCommonModalTemplate" width="60%" top="5vh">
    <avue-crud
      ref="crud"
      :table-loading="loading"
      :data="data"
      :option="tableOption"
      @search-change="searchChange"
      @search-reset="searchReset"
      :page.sync="page"
      @on-load="onLoad"
      @selection-change="selectionChange"
      @row-dblclick="rowDbclick"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
    ></avue-crud>
  </el-dialog>
</template>
<script>
import request from '@/router/axios';
import classGroupRegisterVue from '../../views/product/classGroupRegister.vue';
export default {
  name: 'common-dataTables-template',
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    dataTables: {
      type: Array,
      default: () => []
    }
  },

  components: {},
  watch: {},
  data() {
    return {
      isCommonModalTemplate: false, //模态框是否显示
      method: 'get',
      query: {},
      tableOption: {
        height: 'calc(100vh - 480px)',
        calcHeight: 30,
        border: true, //表格外框线是否显示
        stripe: true, //表格是否显示条纹
        header: true, //表格头部是否显示
        index: true, //表格数据序号
        page: true, //表格分页是否显示
        addBtn: false, //新增按钮是否显示
        menu: false, //表格操作栏是否显示
        refreshBtn: true, //刷新按钮是否显示
        columnBtn: false, //控制表格列是否显示按钮是否显示
        // searchBtn: false
        searchMenuSpan: 6, //搜索按钮所占宽度
        searchMenuPosition: 'right', //搜索按钮位置
        column: [], //表格列配置
        selection: false, //表格是否多选
        reserveSelection: false, //表格是否分页多选
        searchShow: true
      }, //表格属性
      // 分页器配置
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      }, //表格分页
      selectedRows: [], //表格选中行数据
      data: [], //表格数据
      loading: false,
      dataTables: []
    };
  },

  created() {},

  mounted() {},

  methods: {
    /**
     *显示模态框
     */
    showModal() {
      setTimeout(() => {
        this.tableOption.column = this.option.columnDefs;
        this.isCommonModalTemplate = true;
        this._forEach(this.tableOption.column, (item) => {
          if (item.searchValue) {
            this.query[item.prop] = item.searchValue;
          }
        });
      }, 500);
    },

    /**
     * 首次加载表格
     */
    onLoad(page, params = {}) {
      console.log(this.query);
      this.createRowData(page, Object.assign(params, this.query));
    },

    /**
     * 多选事件
     */
    selectionChange(list) {
      // this.$message.success('选中的数据' + JSON.stringify(list));
      this.selectedRows = list;
    },

    /**
     * 双击事件
     */
    rowDbclick(row) {
      //获取选中表注释，使用-截取来获取表别名，再匹配到insideCode
      let tableNameAndAlias = '';
      this._forEach(this.tableOption.column[2].dicData, (item) => {
        if (item.tableName === this.query.tabname) {
          tableNameAndAlias = item.tableComment;
        }
      });
      //
      let tableNameList = tableNameAndAlias.split('-');
      if (tableNameList.length === 1) {
        // let findNode = this._find(this.dataTables, { tableName: this.query.tabname });
        row['insideCode'] = this._find(this.tableOption.column[2].dicData, { tableName: this.query.tabname }).insideCode;
      } else if (tableNameList.length === 2) {
        let tableAlias = this._get(tableNameList, '[1]', '');
        let findNode = this.tableOption.column[2].dicData.find((item) => {
          return item.tableName == this.query.tabname && item.tableAlias == tableAlias;
        });
        console.log(findNode);
        row['insideCode'] = findNode.insideCode;
        row['tableAlias'] = findNode.tableAlias;
        // this.modalDataService.modalData.commonModalTemSelectedInfo['insideCode'] = findNode.insideCode;
        // this.modalDataService.modalData.commonModalTemSelectedInfo['tableAlias'] = findNode.tableAlias;
      } else {
        toastr.error('表别名中有 - 字符，请检查后重新输入!');
      }
      this.$emit('getDataTablesSelectedRows', row);
      this.isCommonModalTemplate = false;
    },

    /**
     * 改变当前页
     */
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    /**
     * 改变当前页大小
     */
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },

    /**
     * 隐藏模态框
     */
    hideModal() {
      this.isCommonModalTemplate = false;
    },
    /**
     * 搜索
     */
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page);
      done();
    },
    /**
     * 刷新
     */
    refreshChange() {
      this.onLoad(this.page);
    },
    /**
     * 搜索重置
     */
    searchReset() {
      //   this.tableOption.query = { ...this.query };
      this.query = {};
      this.onLoad(this.page);
    },

    /**
     * 查询表格数据
     */
    createRowData(page, params) {
      params.tabname = params.tabname.split('-')[0];
      this.loading = true;
      //是否默认加载数据
      request({
        url: this.option.url,
        method: 'get',
        params: {
          current: page.currentPage,
          size: page.pageSize,
          ...params
        }
      }).then((res) => {
        const data = res.data.data;
        if (data.records) {
          this.data = data.records;
        } else {
          this.data = data;
        }
        if (data.size) {
          this.page.total = data.total;
          this.page.pageSize = data.size;
        }
        setTimeout(() => {
          this.loading = false;
        }, 300);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form-item--small.el-form-item {
  margin-bottom: 0;
}
.common-modal-sub-title {
  display: flex;
  align-items: center;
  margin: -10px 0;
}
</style>
